列舉 Enum

Enum 的用法我想接觸過C# 的人都十分了解, 它能夠把變數的範圍限制在某些範圍並賦予其定義, 可讓程式碼更好維護之外更增加程式可讀性, 但是Javascript 才不鳥我們呢.

我們來看看Typescript 怎麼寫

enum MyColor {
   Red,
   Green,
   Blue
}

let color: MyColor = MyColor.Red;
console.log(color);

結果會輸出

1

你也可以依照數值, 取得對應的顏色名稱

var colorName = MyColor[2];
console.log(colorName);

雖然說Javascript 沒有內建的enum , 但我們還是來看看Typescript 是如何幫我們產生的

var MyColor;
(function (MyColor) {
    MyColor[MyColor["Red"] = 0] = "Red";
    MyColor[MyColor["Green"] = 1] = "Green";
    MyColor[MyColor["Blue"] = 2] = "Blue";
})(MyColor || (MyColor = {}))

宣告合併 (declaration merging)

在Typescript 中, 假設有兩個地方都宣告同一個interface 名稱, 例如

interface IPerson {
   walk(): void;
}

另一個地方宣告

interface IPerson {
   talk(): void;
}

編譯出來的IPerson 相當於

interface IPerson {
   walk(): void;
   talk(): void;
}

這對宣告Javascript global 很有用, 例如

在某個 xxx.ts 中

declare global {
   interface Array<T> {
      average(): number;
   }
}

Array.prototype.average = function () {
   return this.reduce(function (a, b) {
      if(typeof a !== "number" || typeof b !== "number"){
         throw new Error("average method applies only on numeric arrays.");
      }
      return a + b;
   }, 0) / this.length;
   return this;
}

當你引用這 ts 檔案,

let data: number[] = [1, 2, 3];
console.log(data.average());

Array 就會支援average 方法, 結果會算出平均值

然後又有另一個 ts 檔案擴充Array median() 中位數方法,

declare global {
   interface Array<T> {
      median(): number;
   }
}

這兩個 ts 就相當於

declare global {
   interface Array<T> {
      average(): number;
      median(): number;
   }
}

回呼函數 Callback

在Javascript 裡面常常會用到callback , 例如 setInterval() 方法

假設我們設計了一個api

function api(callback) {
   ....
   callback(data);
}

開發人員很難看出這個callback 是帶甚麼參數

Typescript 可以明確宣告這個callback

type MyCallback = (IPerson) => void;
function api(callback: MyCallback) {
   ...
   callback(data);
}

上述程式碼示範了 MyCallback 類型是一個回呼函式, 輸入參數類型是 IPerson, 回傳結果是 void .

Type Alias

Typescript 提供為型別取別名, 例如：

type MyScope = Bussiness.Utils.Scope;
type Callback = () => void;

支援 async / await

Typescript 支援非同步方法

下面範例設計一個sleep 非同步方法

async function sleep(time : number): Promise<void> {
   return new Promise<void>((resolve,reject)=>{
      setTimeout(resolve,time);
   });
}

呼叫非同步方法的時候就可以這樣使用

async function main() {
   await sleep(2000);  //延遲兩秒
   console.log("Hello World!");
}